<template>
  <div class="main">
    <md-field>
      <md-cell-item title="头像" arrow>
        <img
          :src="$api.imgUrl + userImg()"
          class="userImg"
          slot="right"
          alt=""
        />
        <md-image-reader
          @complete="onReaderComplete"
          @error="onReaderError"
          is-multiple
        >
        </md-image-reader>
      </md-cell-item>
      <md-cell-item
        title="用户名"
        :addon="userInfo.username"
        @click="$commonJs.goPage('personChangeUserName')"
        arrow
      />
      <md-cell-item
        title="用绑定手机"
        :addon="userInfo.mobile"
        @click="$commonJs.goPage('personChangePhone')"
        arrow
      />
    </md-field>
    <md-button type="primary" class="logOut" @click="logOut"
      >退出登录</md-button
    >
  </div>
</template>

<script>
import { Field, CellItem, Button, ImageReader, Tag } from "mand-mobile";
import { mapState } from "vuex";
export default {
  name: "info",
  components: {
    [Field.name]: Field,
    [CellItem.name]: CellItem,
    [Button.name]: Button,
    [ImageReader.name]: ImageReader,
    [Tag.name]: Tag
  },
  methods: {
    personalInfo() {
      this.$ajax
        .post(this.$api.personalCenter)
        .then(res => {
          this.$store.dispatch("changeUserImg", res.data.img_head);
          this.$store.dispatch("changeUsername", res.data.username);
          this.$store.dispatch("changeUserMobile", res.data.mobile);
        })
        .catch(err => {
          this.$toast.failed(err);
        });
    },
    userImg() {
      if (this.userInfo.img_head.length > 0) {
        return this.userInfo.img_head;
      } else {
        return require("@/assets/img/headPortrait.png");
      }
    },
    logOut() {
      this.$ajax
        .post(this.$api.loginout)
        .then(() => {
          localStorage.removeItem("mtoken");
          this.$toast.succeed("您已退出登录！");
          this.$router.push({ name: "home" });
          this.$store.dispatch("changeLogin", false);
        })
        .catch(err => {
          this.$toast.failed(err);
        });
    },
    onReaderComplete(name, { file }) {
      this.$toast.hide();
      let formData = new FormData();
      formData.append("img_head", file, file.name);
      this.$ajax
        .upload(this.$api.saveHead, formData)
        .then(res => {
          this.$store.dispatch("changeUserImg", res.data.url);
          this.$toast.succeed("头像修改成功！");
        })
        .catch(err => {
          this.$toast.failed(err);
        });
    },
    onReaderError(name, { msg }) {
      this.$toast.failed(msg);
    }
  },
  computed: {
    ...mapState(["userInfo"])
  },
  created() {
    this.personalInfo();
  }
};
</script>

<style scoped lang="stylus">
.main{
  padding 0 24px;
  background-color #ffffff;
  height 100%
}
.userImg{
  width 98px;
  height: 98px;
  border-radius 50%;
}
.md-cell-item-body{
  padding-left 24px !important;
}
.logOut{
  height: 98px;
  background-color #317EB9;
  position absolute;
  bottom 0;
  left 0;
  font-size 30px
}
.md-button.primary::after{
  border none;
}
</style>
